<template>
  <div class="company_detail" slot="body">
    <Header></Header>

    <el-card class="box-card">

      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="4" style="">
            <img :src="company.picture" alt="" style="margin-top:10px;margin-left:10px;width: 168px;height: 168px">
          </el-col>
          <el-col :span="20">
            <!--            {{company}}-->
            <el-row><h1 style="color: #409EFF;">{{company.companyName}}</h1></el-row>
            <el-row style="margin-top:0px">
              <el-col :span="12" style=""><i class="el-icon-postcard"></i> 简介 :<span> {{company.remark}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top:15px">
              <el-col :span="8"><i class="el-icon-data-analysis"></i> 融资情况 :<span> {{company.financing}}</span>
              </el-col>
              <el-col :span="8"><i class="el-icon-s-custom"></i> 公司规模 :<span> {{company.scale}}</span></el-col>
              <el-col :span="8"><i class="el-icon-s-grid"></i> 行业领域 :<span> {{company.industry}}</span></el-col>
            </el-row>
            <el-row style="margin-top:15px">
              <el-col :span="24" style=""><i class="el-icon-location-information"></i> 公司地址 :
                <!--                <span style="">{{company.province}}省{{company.city}}市{{company.area}}区{{company.addr}}</span>-->
                <span style="">{{company.addr}}</span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>

      <el-tabs>
        <el-tab-pane label="介绍">
          <el-descriptions title="介绍"></el-descriptions>
          <el-row style="color: #909399;text-align: left">
            <el-col :span="24">{{company.remark}}</el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="公司信息">
          <el-descriptions title="公司信息"></el-descriptions>
          <el-row style="color: #909399;margin: 20px 0px"><i class="el-icon-user-solid"> 统一社会信用代码 :
            {{company.companyNo}}</i></el-row>
          <el-row style="color: #909399;margin: 20px 0px"><i class="el-icon-info"> 法人代表 : {{company.legalPerson}}</i>
          </el-row>
          <!--          <el-row style="color: #909399;margin: 20px 0px"><i class="el-icon-money"> 注册资本 : 1000万(元)</i></el-row>-->
          <el-row style="color: #909399;margin: 20px 0px"><i class="el-icon-alarm-clock"> 创建时间 :
            {{company.createTime}}</i></el-row>
          <el-row style="color: #909399;margin: 20px 0px"><i class="el-icon-alarm-clock"> 修改时间 :
            {{company.updateTime}}</i></el-row>
          <el-row style="margin: 20px 0px">
            <a @click="toCompanyWeb(company.web)" :href="company.web" style="color: #409EFF;" type="text">
              <i class="el-icon-position"> 公司官网 :</i><span> {{company.web}}</span>
            </a>
          </el-row>
        </el-tab-pane>
        <el-tab-pane :label="'招聘职位'+' ('+job_list.length+')'">
          <el-row>
            <el-col :span="8" v-for="i in job_list" :key="i" class="text-card">
              <el-card @click.native="job_detail(i.id)" style="cursor: pointer;width: 380px">
                <el-row>
                  <el-col :span="8">
                    <img :src="i.picture" :alt="i.picture" style="width: 80px;height: 80px">
                  </el-col>
                  <el-col :span="14">
                    <el-row style="margin-bottom: 10px"><span style="font-size: 18px">{{i.title}}</span></el-row>
                    <el-row><span style="color: #909399">{{i.education}} | {{i.experience}} | {{i.category}}</span></el-row>
                    <el-row style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">工作地点 : {{i.addr}}</el-row>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane :label="'校招职位'+' ('+school_list.length+')'">
          <el-row>
            <el-col :span="8" v-for="i in school_list" :key="i" class="text-card">
              <el-card @click.native="job_detail(i.id)" style="cursor: pointer;width: 380px">
                <el-row>
                  <el-col :span="8">
                    <img :src="i.picture" :alt="i.picture" style="width: 80px;height: 80px">
                  </el-col>
                  <el-col :span="14">
                    <el-row style="margin-bottom: 10px"><span style="font-size: 18px">{{i.title}}</span></el-row>
                    <el-row><span style="color: #909399">{{i.education}} | {{i.experience}} | {{i.category}}</span></el-row>
                    <el-row style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">工作地点 : {{i.addr}}</el-row>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane :label="'实习职位'+' ('+internship_list.length+')'">
          <el-row>
            <el-col :span="8" v-for="i in internship_list" :key="i" class="text-card">
              <el-card @click.native="job_detail(i.id)" style="cursor: pointer;width: 380px">
                <el-row>
                  <el-col :span="8">
                    <img :src="i.picture" :alt="i.picture" style="width: 80px;height: 80px">
                  </el-col>
                  <el-col :span="14">
                    <el-row style="margin-bottom: 10px"><span style="font-size: 18px">{{i.title}}</span></el-row>
                    <el-row><span style="color: #909399">{{i.education}} | {{i.experience}} | {{i.category}}</span></el-row>
                    <el-row style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">工作地点 : {{i.addr}}</el-row>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>


    </el-card>

    <Footer></Footer>
  </div>
</template>

<script>
  import Header from './Header'
  import Footer from './Footer'

  export default {
    name: 'CompanyDetail',
    components: {Header, Footer},
    created () {
      this.$axios.post('http://localhost:8081/company/selectById', {
        'id': this.$route.query.id
      }).then((res) => {
        const result = res.data
        this.company = result.data
      })
      setTimeout(() => {
        this.$axios.post('http://localhost:8081/job/selectByJob', {
          'company': this.company.companyName,
          'tag': 1
        }).then((res) => {
          const result = res.data
          this.job_list = result.data
          console.log(this.job_list)
          console.log(111)
        })
        this.$axios.post('http://localhost:8081/job/selectByJob', {
          'company': this.company.companyName,
          'tag': 2
        }).then((res) => {
          const result = res.data
          this.school_list = result.data
        })
        this.$axios.post('http://localhost:8081/job/selectByJob', {
          'company': this.company.companyName,
          'tag': 3
        }).then((res) => {
          const result = res.data
          this.internship_list = result.data
        })
      }, 500)

    },
    data () {
      return {
        company: {
          companyName: '哇啦软件开发有限公司',
          introduce: '哇啦哇啦',
          financing: '无需融资',
          scale: '100-299人',
          type: '互联网',
          province: '广东',
          city: '广州',
          area: '海珠',
          addr: '广州塔顶楼',
          url: 'http://www.baidu.com',
          desc: '广东省广州市海珠区广州塔顶楼',
          job_count: 0,
          school_count: 0,
          internship_count: 0,
          job_list: {},
          school_list: {},
          internship_list: {},
        },
        job_list: [],
        school_list: [],
        internship_list: [],
      }
    },
    methods: {
      toCompanyWeb (url) {
        window.open(url)
      },
      job_detail (id) {
        this.$router.push({path: 'job_detail', query: {id: id}})
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .text-card {
    font-size: 15px;
    padding: 6px 0px;
  }
</style>
